<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!--IE Compatibility modes-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--Mobile first-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>403</title>

    <meta name="description" content="Free Admin Template Based On Twitter Bootstrap 3.x">
    <meta name="author" content="">

    <meta name="msapplication-TileColor" content="#5bc0de"/>
    <meta name="msapplication-TileImage" content="assets/img/metis-tile.png"/>

    <!-- Bootstrap -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font Awesome -->
<#--<link rel="stylesheet" href="assets/lib/font-awesome/css/font-awesome.min.css">-->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/lib/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="/assets/lib/bootstrap-switch/css/bootstrap3/bootstrap-switch.min.css">
    <!-- Metis core stylesheet -->
    <link rel="stylesheet" href="/assets/css/main.css">


    <!-- animate.css stylesheet -->
    <link rel="stylesheet" href="/assets/lib/animate.css/animate.css"/>
    <link rel="stylesheet" href="/assets/lib/select2/css/select2.min.css"/>
    <link rel="stylesheet" href="/assets/lib/ztree/css/metroStyle/metroStyle.css"/>
    <link rel="stylesheet" href="/assets/lib/bootstrap-validator/css/bootstrapValidator.min.css"/>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="bg-dark dk" id="wrap" style="height:50px;">
    <header class="head">
        <div class="">
            <ol class="breadcrumb" style="background-color: #3a3a3a">
                <li><a href="#"> <i class="fa fa-home"> 系统设置</i></a></li>
                <li class="active">菜单设置</li>
            </ol>
        </div>
        <!-- /.main-bar -->
    </header>
</div>
<div class="container" style="width:100%;">
        <div class="row">
            <div class="col-lg-12">
                <div class="box dark">
                    <header>
                        <div class="icons"><i class="fa fa-th-large"></i></div>
                        <h5>菜单设置</h5>
                        <!-- .toolbar -->
                        <div class="toolbar">
                            <nav style="padding: 8px;">
                            </nav>
                        </div>            <!-- /.toolbar -->
                    </header>
                    <div class="col-lg-12">
                        <div class="box">
                            <div id="collapse4" class="body">
                                <div id="toolbar" style="margin-bottom: 5px;">
                                    <div class="btn-group">
                                        <button type="button"data-toggle="modal"   data-target="#add_modal" class="btn btn-default"><i class="fa fa-plus"></i>&nbsp;新增菜单 </button>
                                    </div>
                                </div>
                                <table id="dataTable"
                                       class="table table-bordered table-condensed table-hover table-striped">
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--END TEXT INPUT FIELD-->
        </div>
    <!-- /.col-lg-8 col-offset-2 -->
    <!--------------------------添加/修改信息的弹出层---------------------------->
    <div id="add_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         data-backdrop="static"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>


                    <h5 class="modal-title">
                        <i class="icon-pencil"></i>
                        <span id="lblAddTitle" data-type="add" style="font-weight:bold">添加菜单</span>
                    </h5>
                </div>
                <form class="form-horizontal form-bordered form-row-strippe" id="add_form" action=""
                      data-toggle="validator" enctype="multipart/form-data">
                    <div class="modal-body">
                        <input name="id" type="hidden" value=""/>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2">父菜单</label>
                                    <div class="col-md-10">
                                        <input name="pidName" type="text" class="form-control"
                                               placeholder="父ID..." id="citySel" onclick="showMenu();" onkeydown="return false;"/>
                                        <input name="pid" type="hidden" class="form-control"
                                               placeholder="父ID..."/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-2"></label>
                                    <div class="col-md-10">
                                    <div id="menuContent" class="menuContent" style="display:none;">
                                        <ul id="treeDemo" class="ztree"></ul>
                                    </div>
                                    </div>
                                </div>


                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2">名称</label>
                                    <div class="col-md-10">
                                        <input name="text" type="text" class="form-control"
                                               placeholder="名称..."/>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2">url</label>
                                    <div class="col-md-10">
                                        <input name="url" type="text" class="form-control"
                                               placeholder="url..."/>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2">排序</label>
                                    <div class="col-md-10">
                                        <input name="sort" type="text" class="form-control"
                                               placeholder="排序..."/>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2">icon</label>
                                    <div class="col-md-10">
                                        <input name="icon" type="text" class="form-control"
                                               placeholder="icon..."/>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer bg-info">
                        <input type="hidden" id="ID" name="ID"/>
                        <button type="submit" id="add_button" class="btn blue">确定</button>
                        <button type="button" class="btn green" data-dismiss="modal">取消</button>
                    </div>
                    <div class="alert alert-danger" id="add_error_div" style="text-align: center">
                        <strong>错误!</strong><span></span>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /modal -->


</div>
<!--jQuery -->
<script src="/assets/lib/jquery/jquery.min.js"></script>
<!--Bootstrap -->
<script src="/assets/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="/assets/lib/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/assets/lib/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="/assets/lib/treegrid/bootstrap-treegrid.js"></script>
<script src="/assets/lib/ztree/jquery.ztree.all.min.js"></script>
<script src="/assets/lib/bootstrap-validator/js/bootstrapValidator.min.js"></script>
<!-- MetisMenu -->
<script src="/assets/lib/metismenu/metisMenu.js"></script>
<!-- Metis core scripts -->
<script src="/assets/js/core.js"></script>
<!-- Metis demo scripts -->
<script src="/assets/js/app.js"></script>
<script src="/assets/lib/layer/layer.js"></script>
<script>
    var csrf_token = "${_csrf.token}";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN':csrf_token
        }});
    $(document).ready(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            submitButtons: 'button[type="submit"]',
            live: 'enabled',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                pid: {
                    validators: {
                        notEmpty: {
                            message: "ID不为空"
                        },
                        numeric: {
                            message: "ID须为数值"
                        }
                    }
                },
                text: {
                    validators: {
                        notEmpty: {
                            message: "名称不为空"
                        }
                    }
                },
                url: {
                    validators: {
                        stringLength: {
                            max: 30,
                            message: "url不大于30字符"
                        }
                    }
                },
                icon: {
                    validators: {
                        stringLength: {
                            max: 30,
                            message: "url不大于30字符"
                        }
                    }
                },
                sort: {
                    validators: {
                        numeric: {
                            message: "ID须为数值"
                        }
                    }
                }
            }
        }).on('success.form.bv', function (e) {
            // 终止重复提交
            e.preventDefault();
            // 得到form表单对象
            var $form = $(e.target);
            // 获得bootstrap验证对象
            var bv = $form.data('bootstrapValidator');
            // 使用Ajax提交form表单数据
            var text=$("#lblAddTitle").attr("data-type");
            if(text=="add"){
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "/sys/add/menu",
                    data: $form.serialize(),
                    beforeSend: function () {
                    },
                    success: function (res) {
                        if (res.status == "y") {
                            $("#add_modal").modal("hide");
                            $("#add_error_div").hide();
                            $("table").bootstrapTable('refresh');
                            layer.msg("添加成功!", {icon: 6});
                        } else {
                            $("#add_error_div").find("span").text(res.info);
                            $("#add_error_div").show();
                        }
                    },
                    error: function (xhr, errorType, error) {
                        $form.data('bootstrapValidator').resetForm();
                        $("#add_error_div").find("span").text(error);
                        $("#add_error_div").show();
                    },
                    complete: function () {

                    }
                });

            }else {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "/sys/update/menu",
                    data: $form.serialize(),
                    beforeSend: function () {
                    },
                    success: function (res) {
                        if (res.status == "y") {
                            $("#add_modal").modal("hide");
                            $("#add_error_div").hide();
                            $("table").bootstrapTable('refresh');
                            layer.msg("修改成功!", {icon: 6});
                        } else {
                            $("#add_error_div").find("span").text(res.info);
                            $("#add_error_div").show();
                        }
                    },
                    error: function (xhr, errorType, error) {
                        $form.data('bootstrapValidator').resetForm();
                        $("#add_error_div").find("span").text(error);
                        $("#add_error_div").show();
                    },
                    complete: function () {
                    }
                });

            }

        });
        $('#add_modal').on('hide.bs.modal', function () {
            $(this).find("form")[0].reset();
            $("#add_error_div").hide();
            $("#lblAddTitle").text("添加菜单");
            $("#lblAddTitle").attr("data-type","add");
            $(this).find("form").data('bootstrapValidator').resetForm();
        });
        $('#add_modal').on('show.bs.modal', function () {
            $("#add_error_div").hide();
            hideMenu();
            $.fn.zTree.getZTreeObj("treeDemo").expandAll(false);
        });

        $('#dataTable').bootstrapTable({
            url: '/sys/get/menus',
            toolbar: '#toolbar',
            sidePagination: 'client',
            pagination: false,
            treeView: true,
            treeId: "id",
            treeField: "text",
            detailView: true,//父子表
            treeRootLevel: 0,
            clickToSelect: true,
            onExpandRow: onExpandRow,
            columns: [{
                field: 'id',
                title: '#',
                align: 'center',
                width: 60,
                valign: 'middle',
                formatter: function (value, row, index) {
                    return "<span data-id='" + value + "'>" +( index+1) + "</span>";
                }
            }, {
                field: 'text',
                title: '名称'
            }, {
                field: 'url',
                title: 'url'
            }, {
                field: 'icon',
                title: '图标'
            },{
                field: 'sort',
                title: '排序'
            },
                {
                    field: 'hasNext',
                    title: '是否有下级',
                    formatter: function (value, row, index) {
                        if (value == true)
                            return "是";
                    }
                }, {
                    field: 'enabled',
                    title: '状态',
                    formatter: function (value, row, index) {
                        if (value == true)
                            return "<input class='make-switch' type='checkbox' data-size='mini' data-on-color='warning' data-off-color='danger' checked />";
                        else return "<input class='make-switch' type='checkbox' data-size='mini' data-on-color='warning' data-off-color='danger'/>";
                    }
                }
                , {
                    field: '',
                    title: '操作',
                    formatter: function (value, row, index) {
                        if (row.hasNext) {
                            var strHtml = '<a title="编辑"  href="javascript:void(0);"  class="btn btn-xs btn-info menu-edit" ><i class="fa fa-edit bigger-120"></i></a>';
                            return strHtml;
                        } else {
                            var strHtml = '<a title="编辑"  href="javascript:void(0);"  class="btn btn-xs btn-info menu-edit" ><i class="fa fa-edit bigger-120"></i></a>' +
                                    '&nbsp;<a  href="javascript:;" title="删除" class="btn btn-xs btn-success menu-del"><i class="fa fa-close  bigger-120"></i></a>';
                            return strHtml;
                        }
                    }
                }],
            onPostBody: function () {
                $(".make-switch").bootstrapSwitch({
                    onSwitchChange: function (event, state) {
                        var menuId = $(event.target).closest("tr").find("td:first").find("span").attr("data-id");
                        $.ajax({
                            type: "POST",
                            dataType: "json",
                            url: "/sys/enable/menu",
                            data: {
                                menuId: menuId,
                                enabled: state
                            },
                            beforeSend: function () {
                            },
                            success: function (res) {
                                console.log(res);
                                if (res.status != "y") {
                                    layer.msg("操作失败", {icon: 7});
                                    $(event.target).bootstrapSwitch('state', !state, true);
                                }
                            },
                            error: function (xhr, errorType, error) {
                                layer.msg("操作失败", {icon: 7});
                                $(event.target).bootstrapSwitch('state', !state, true);
                            },
                            complete: function () {
                            }
                        });
                    }
                });
            }
        });


        $(document).on("click", ".menu-del", function (event) {
            var menuId = $(event.target).closest("tr").find("td:first").find("span").attr("data-id");
            layer.confirm('是否删除改菜单？', function () {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "/sys/del/menu",
                    data: {
                        menuId: menuId
                    },
                    success: function (res) {
                        console.log(res);
                        if (res.status != "y") {
                            layer.msg("操作失败", {icon: 7});

                        } else {
                            $("table").closest("table").bootstrapTable('refresh');
                            layer.msg("删除成功", {icon: 6});
                        }
                    },
                    error: function (xhr, errorType, error) {
                        layer.msg("操作失败", {icon: 7});
                    }
                });
            });
        });

        $(document).on("click", ".menu-edit", function (event) {
            var menuId = $(event.target).closest("tr").find("td:first").find("span").attr("data-id");
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "/sys/get/menu",
                data: {
                    id: menuId
                },
                success: function (res) {
                    console.log(res);
                    if (res.status != "y") {
                        layer.msg(res.info, {icon: 7});

                    } else {
                        var $form = $("#add_modal").find("form");

                        var menu = res.data;
                        console.log(menu);
                        $form.find("input").each(function () {
                            var name = $(this).attr("name");
                            switch (name) {
                                case "pidName":
                                    if(menu.parent){
                                        $(this).val(menu.parent.text);
                                    }else  $(this).val("无");
                                    break;
                                case "pid":
                                    $(this).val(menu.pid);
                                    break;
                                case "text":
                                    $(this).val(menu.text);
                                    break;
                                case "url":
                                    $(this).val(menu.url);
                                    break;
                                case "icon":
                                    $(this).val(menu.icon);
                                    break;
                                case "sort":
                                    $(this).val(menu.sort);
                                    break;
                                case "id":
                                    $(this).val(menu.id);
                                    break;
                            }
                        });
                        $("#lblAddTitle").text("修改菜单");
                        $("#lblAddTitle").attr("data-type","update");
                        $("#add_modal").modal("show");
                    }
                },
                error: function (xhr, errorType, error) {
                    layer.msg("操作失败", {icon: 7});
                }
            });
        });

        initTree();

    });
    var setting = {
        data: {//表示tree的数据格式
            simpleData: {
                enable: true,//表示使用简单数据模式
                idKey: "id",//设置之后id为在简单数据模式中的父子节点关联的桥梁
                pidKey: "pId",//设置之后pid为在简单数据模式中的父子节点关联的桥梁和id互相对应
                rootId: "null"//pid为null的表示根节点
            }
        },
        view: {//表示tree的显示状态
            selectMulti: false//表示禁止多选
        },
        check: {//表示tree的节点在点击时的相关设置
            enable: false,//是否显示radio/checkbox
            chkStyle: "checkbox",//值为checkbox或者radio表示
            checkboxType: {p: "", s: ""},//表示父子节点的联动效果
            radioType: "level"//设置tree的分组
        },
        callback:{//表示tree的一些事件处理函数
            onClick:handlerClick
        }
    };
    function initTree() {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "/sys/get/tree/menus",
            beforeSend: function () {
            },
            success: function (res) {
                if (res.status) {
                    layer.msg("获取权限失败", {icon: 7});
                } else {
                    var treeData = res;
                    treeData.push({id: "0", name: "全部", pId: null})
                    $.fn.zTree.init($("#treeDemo"), setting, treeData);

                }
            },
            error: function (xhr, errorType, error) {
                layer.msg("获取角色失败", {icon: 7});
            },
            complete: function () {
            }
        });

    }
    function showMenu() {
        var cityObj = $("#citySel");
        var cityOffset = $("#citySel").offset();
        $("#menuContent").css({
            left: cityOffset.left + "px",
            top: cityOffset.top + cityObj.outerHeight() + "px"
        }).slideDown("fast");
    }
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
    }
    //父子表
    function onExpandRow(index, row, $detail){
        InitSubTable(index, row, $detail);
    }
    InitSubTable = function (index, row, $detail) {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "/sys/get/permission",
            data: {
               menuId:row.id
            },
            success: function (res) {
                if (res.status) {
                    layer.msg(res.info, {icon: 7});
                } else {
                    if(res){
                        $div=$("<div style='form-group'></div>");
                        res.map(function (p1, p2, p3) {
                            var $label=$("<label></label>");
                            $label.addClass("checkbox-inline");
                            $label.append("<i class='fa fa-gg-circle' style='margin-left:20px;'>&nbsp;"+p1.text+"</i>");
                            $div.append($label);
                        });
                        $detail.append($div);
                    }
                }
            },
            error: function (xhr, errorType, error) {
                layer.msg("操作失败", {icon: 7});
            }
        });

    };

    function handlerClick(event,treeId,treeNode){
      var $form=$(event.target).closest("form");
      $form.find("input[name='pidName']").val(treeNode.name);
        $form.find("input[name='pid']").val(treeNode.id);
    }
</script>
</body>

</html>
